<template>
	<!-- 对话框表单 -->
	<el-dialog class="ba-operate-dialog" :close-on-click-modal="false" :destroy-on-close="true"
		:model-value="['Add', 'Edit'].includes(baTable.form.operate!)" @close="baTable.toggleForm">
		<template #header>
			<div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
				{{ baTable.form.operate ? t(baTable.form.operate) : '' }}
			</div>
		</template>
		<el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
			<div class="ba-operate-form" :class="'ba-' + baTable.form.operate + '-form'"
				:style="config.layout.shrink ? '' : 'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'">
				<el-form ref="formRef" @keyup.enter="baTable.onSubmit(formRef)" :model="baTable.form.items"
					:label-position="config.layout.shrink ? 'top' : 'right'"
					:label-width="baTable.form.labelWidth + 'px'" :rules="rules" v-if="!baTable.form.loading">
					<FormItem label="类型" v-model="baTable.form.items!.type" type="radio" :input-attr="{
                            border: true,
                            content: { 1: '热门活动', 2: '系统通知', 3: '商家公告' },
                        }" />
					<el-form-item prop="title" label="标题">
						<el-input v-model="baTable.form.items!.title"
							:placeholder="t('Please input field', { field: '标题' })"></el-input>
					</el-form-item>

					<FormItem label="内容" v-model="baTable.form.items!.content" type="editor" />
				</el-form>
			</div>
		</el-scrollbar>
		<template #footer>
			<div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
				<el-button @click="baTable.toggleForm('')">{{ t('Cancel') }}</el-button>
				<el-button v-blur :loading="baTable.form.submitLoading" @click="baTable.onSubmit(formRef)"
					type="primary">
					{{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? t('Save and edit next item') : t('Save') }}
				</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
	import { reactive, inject, watch, useTemplateRef } from 'vue'
	import { useI18n } from 'vue-i18n'
	import type baTableClass from '/@/utils/baTable'
	import { regularPassword } from '/@/utils/validate'
	import type { FormItemRule } from 'element-plus'
	import FormItem from '/@/components/formItem/index.vue'
	import router from '/@/router/index'
	import { buildValidatorData } from '/@/utils/validate'
	import { useConfig } from '/@/stores/config'

	const config = useConfig()
	const formRef = useTemplateRef('formRef')
	const baTable = inject('baTable') as baTableClass

	const { t } = useI18n()

	const rules : Partial<Record<string, FormItemRule[]>> = reactive({
		username: [buildValidatorData({ name: 'required', title: t('feedback.username') }), buildValidatorData({ name: 'account' })],
		nickname: [buildValidatorData({ name: 'required', title: t('feedback.nickname') })],
		content: [buildValidatorData({ name: 'required', title: t('feedback.content') })],
		mobile: [buildValidatorData({ name: 'mobile' })],
		password: [
			{
				validator: (rule : any, val : string, callback : Function) => {
					if (baTable.form.operate == 'Add') {
						if (!val) {
							return callback(new Error(t('Please input field', { field: t('feedback.password') })))
						}
					} else {
						if (!val) {
							return callback()
						}
					}
					if (!regularPassword(val)) {
						return callback(new Error(t('validate.Please enter the correct password')))
					}
					return callback()
				},
				trigger: 'blur',
			},
		],
	})

	const changeAccount = (type : string) => {
		baTable.toggleForm()
		setTimeout(() => {
			router.push({
				name: type == 'money' ? 'systemInfo/moneyLog' : 'systemInfo/scoreLog',
				query: {
					user_id: baTable.form.items!.id,
				},
			})
		}, 100)
	}

	watch(
		() => baTable.form.operate,
		(newVal) => {
			rules.password![0].required = newVal == 'Add'
		}
	)
</script>

<style scoped lang="scss">
	.avatar-uploader {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		border-radius: var(--el-border-radius-small);
		box-shadow: var(--el-box-shadow-light);
		border: 1px dashed var(--el-border-color);
		cursor: pointer;
		overflow: hidden;
		width: 110px;
		height: 110px;
	}

	.avatar-uploader:hover {
		border-color: var(--el-color-primary);
	}

	.avatar {
		width: 110px;
		height: 110px;
		display: block;
	}

	.image-slot {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
</style>